<template>
    <el-row>
        <el-col class="btn">
          <el-dialog :visible.sync="dialogeditVisible" width="635px" :before-close="handleClose" @close="handleClose()">
              <div slot="title" class="dialog-title box box-align-center">
                  <i class="title-icon"></i>
                  <span class="title-text ml10">{{titles}}</span>
              </div>
              <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="团队名称" prop="name">
                  <el-input type="text" v-model="ruleForm.name" autocomplete="off" placeholder="2020级教研团队"></el-input>
                </el-form-item>
                <el-form-item label="团队对象" prop="nameobj">
                  <el-input type="text" v-model="ruleForm.nameobj" autocomplete="off" placeholder="2020级劳动关系学院经济管理系"></el-input>
                </el-form-item>
                <el-form-item label="团队logo" prop="imageUrl" ref="image">
                     <el-upload
                       class="avatar-uploader"
                       :action="uploadfileurl"
                       :show-file-list="false"
                       :on-success="handleAvatarSuccess"
                       :before-upload="beforeAvatarUpload">
                       <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                  <el-button class="reset-cancel-btn" @click="handleClose()">取 消</el-button>
                  <el-button class="reset-comfirm-btn" @click="onSubmit('ruleForm')">保 存</el-button>
              </span>
          </el-dialog>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props:{
            dialogeditVisible:{
                type:Boolean,
                // default: false
            },
            titles:{
                default:'教研团队信息'
            },
            jyzids:{
                type:Number
            }
        },
        data() {
          return {
              uploadfileurl: this.$url.baseURL + '/upload/uploadfile',
               ruleForm: {
                 name: '',
                 nameobj: '',
                 imageUrl: ''
               },
               rules: {
                name: [
                  { required: true, message: '请输入团队名称', trigger: 'blur' },
                  ],
                  nameobj: [
                    { required: true, message: '请输入服务对象', trigger: 'blur' }
                  ],
                  imageUrl: [
                    { required: true, message: '请选择团队logo', trigger: 'change' }
                  ],
               },
          }
        },
        mounted(){
            console.log(this.dialogeditVisible);
        },
        methods: {
          handleAvatarSuccess(res, file) {
			  this.ruleForm.imageUrl = response.body.data.url;
              this.$refs['image'].clearValidate()
            // this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
          },
          beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            const fileName = file.name;
            const index = fileName.lastIndexOf(".");
            const ext = fileName.substr(index + 1);
            const isLt2M = file.size / 1024 / 1024 < 2;
            const arr = ["jpg", "png", "gif", "jpeg"];
            const isOk = arr.includes(ext);
            if (!isOk) {
                this.$message.warning('封面格式暂不支持！');
                return false;
            }
            // if (!isJPG) {
            //   this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            if (!isLt2M) {
              this.$message.error(`当前文件${parseInt(isLt2M)}MB,上传头像图片大小不能超过 2MB!`);
            }
            return  isLt2M;
          },
          handleClose() {
              this.$emit('clickCloses')
          },
          onSubmit(formName) {
              let checkedTrs=[this.ruleForm.name,this.ruleForm.nameobj,this.ruleForm.imageUrl]
               this.$refs[formName].validate((valid) => {
                        if (valid && this.ruleForm.imageUrl!='') {
                              this.$api.jyz.addJyzUser({
                                  'ids': checkedTrs.join(","),
                                  'jyzid': this.jyzids
                              }).then(res => {
                                  if (res.code == '0') {
                                      this.$message.success('操作成功！');
                                      // this.$emit('xtjyUserList');
                                      this.$emit('clickCloses');
                                  } else {
                                      this.$message.error('请求失败！');
                                  }
                              })
                        } else {
                             this.$message({
                                 message: '有未填信息',
                                 type: 'warning'
                             })
                        }
                      });

          },
        }
      }
</script>

<style scoped lang="scss">
   /deep/ .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        background: #F6F7FA;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
</style>
